<script setup lang="ts">
import { ref, watch } from 'vue'
import FilterForm from '../packages/filter-form'
import { cloneDeep } from 'lodash-es'
import { type IForm, type IFormConfigurationItems } from '../packages/filter-form/types/index'

const form = ref({
  username: ''
})
const formConfigurationItems: IFormConfigurationItems = {
  elForm: {},
  typeSetting: [
    [
      {
        vModel: 'username',
        component: 'input',
        col: {
          span: 24
        },
        elFormItem: { label: '123' },
        elModule: {
          onblur() {
            console.log(123)
          }
        }
        // elFormItem: {
        //   label: '456'
        // },
        // elModule: {
        //   disabled: false
        // },
        // elOption: {
        //   // radioOptions: [{ label: 'man' }, { label: 'women' }],
        //   radioButtonOptions: [{ label: 'man' }, { label: 'women' }]
        // }
      }
    ]
  ]
}
watch(
  () => form.value,
  val => {
    console.log(val, '改变')
  },
  { deep: true }
)
const getValueFn = (val: any) => {
  form.value = cloneDeep(val)
}
</script>

<template>
  <FilterForm :filterConfig="formConfigurationItems" :filterForm="form" @get-form-value="getValueFn" />
</template>

<style scoped></style>
